import { IndexBar, List, NavBar, SearchBar } from 'antd-mobile'
import { useEffect, useState } from 'react'
import utils from '../../utils/index'
import { useNavigate } from 'react-router-dom'
const City = () => {
    const nav=useNavigate()
    const [list, setList] = useState([])
    // const {data:[cityList:[],hotCities:[]]}=useState('')
    const getData = async () => {
        const resp = await utils.get('/city')
        console.log(resp.data.data);
        setList(resp.data.data)
    }
   
    useEffect(() => {
        getData()
    }, [])
    return (
        <div>
            城市
            <NavBar onBack={() =>nav(-1)}>
                <SearchBar placeholder='请输入内容' />
            </NavBar>
            <div style={{ height: window.innerHeight }} >
                <IndexBar sticky>
                    {list.cityList?.map((v) => {
                        return (
                            <IndexBar.Panel
                                index={v.title}
                                title={v.title}
                                key={v.title}
                            >
                                <List>
                                    {list.citys?.map((v, i) => (
                                        <List.Item key={i}>{v.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>

        </div>
    )
}

export default City
